import styled from 'styled-components';
import React, { CSSProperties, useState, useEffect, useRef, ReactNode } from 'react';
import { Button, Typography, Input } from 'antd';

const { Paragraph } = Typography;

export interface InputAssistantPanelProps {
    style?: CSSProperties;
    preface?: string | ReactNode;
}

export const InputAssistantPanel: React.FC<InputAssistantPanelProps> = (props) => {

    const [loading, setLoading] = useState<boolean>(false);

    return (
        <Container style={props.style}>
            {
                props.preface && (
                    typeof (props.preface) === 'string' ? <Paragraph
                        ellipsis={{
                            rows: 2,
                            expandable: true,
                            onEllipsis: (ellipsis) => {
                                console.log('Ellipsis changed:', ellipsis);
                            },
                        }}
                    >
                        {props.preface}
                    </Paragraph> : props.preface
                )
            }
            <Buttons>
                <Button loading={loading} type="primary" htmlType="submit">
                    添加
                </Button>
            </Buttons>
        </Container>
    );
}

const Container = styled.div`
    width: 100%;
`;

const Buttons = styled.div`
    width: 100%;
`;
